<!--
 * @Author: GKN
 * @Date: 2023-08-21 17:14:24
 * @LastEditTime: 2024-02-01 10:55:51
 * @LastEditors: GKN
 * @Description: 
 * @FilePath: \mod\src\view\mainAc\index.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<template>
  <div class="mainPadding p-t">
    <div class="max-w">
    <div class="flex flex-j-s">
      <div class="font-Breadcrumbs"></div>
      <el-breadcrumb separator="|">
        <el-breadcrumb-item v-for="(item,i) in breadcrumb_list" v-show="item.isNav==1" :key="i" @click="goList1(item,i)" class="cursor-p">{{ item.name }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="ad-view MarT">
      <adImgView :src="ad_list1.length>0?ad_list1[0].img:''" @click="proxy.$comJs.openUrl(ad_list1.length>0?ad_list1[0]:'')" />
    </div>
    <div class="withFull MarT" v-if="module_list[0].show">
      <Card1 title="焦点" :more="true" @moreClick="more(module_list[0].id,'焦点')">
          <template v-slot:main1>
            <el-row :gutter="20">
              <el-col :span="16">
                <div class="border-r6 po-re" style="height: 428px;"  @click="goInfo(list_jd.length>0?list_jd[0]:{},'焦点')">
                  <imgView :src="list_jd.length>0?list_jd[0].thumb:''"></imgView>
                  <div class="po-ab0 xf-font omit" style="width: 100%;">
                    {{list_jd.length>0?list_jd[0].name:'' }}
                  </div>
                </div>
              </el-col>
              <el-col :span="8" >
                <div class="border-r6 po-re" style="height: 48%;" @click="goInfo(list_jd.length>1?list_jd[1]:{},'焦点')">
                  <imgView :src="list_jd.length>1?list_jd[1].thumb:''"></imgView>
                  <div class="po-ab0 xf-font omit" style="width: 100%;">
                    {{list_jd.length>1?list_jd[1].name:'' }}
                  </div>
                </div>
                <div style="height: 48%;">
                  <div v-for="(item,i) in list_jds" :key="i" @click="goInfo(item,'焦点')" class="font-title omit MarT24" style="text-align: left;" >{{ item.name }}</div>
                </div>
                
              </el-col>
            </el-row>
          </template>
      </Card1>
    </div>
    <div class="withFull MarT" v-if="module_list[1].show">
      <Card1 title="调研" :more="true"  @moreClick="more(module_list[1].id,'调研')">
          <template v-slot:main1>
            <myEmpty v-if="list_dy.length==0||!list_dy" />
            <el-row :gutter="20">
              <el-col :span="6" v-for="(item,i) in list_dy" :key="i" @click="goInfo(item,'调研')">
                <div class="border-r6" style="height: 164px;">
                  <imgView :src="item.thumb" />
                </div>
                <div class="font-title omit-2 MarT font-text-al-l">{{ item.name }}</div>
              </el-col>
            </el-row>
          </template>
      </Card1>
    </div>
    <div class="withFull MarT" v-if="module_list[2].show">
      <Card1 title="培训" :more="true" background="pxviewbg" class="pxviewbg"  @moreClick="more(module_list[2].id,'培训')">
          <template v-slot:main1>
            <div style="min-height: 150px;">
              <myEmpty v-if="list_px.length==0||!list_px" />
              <el-row :gutter="20">
                <el-col :span="8" v-for="(item,i) in list_px" :key="i" @click="goInfo(item,'培训')">
                  <div class="cursor-p pxview font-text-al-l omit p-l p-r border-r6 shadow-3">{{ item.name }}</div>
                </el-col>
              </el-row>
            </div>
            
          </template>
      </Card1>
    </div>
    <div class="withFull MarT">
      <el-row :gutter="20">
        <el-col :span="16">
          <Card1 v-if="module_list[3].show" title="会事" :more="true" @moreClick="more(module_list[3].id,'会事')">
            <template v-slot:main1>
              <div style="min-height:300px;" class="p-t">
                <myEmpty v-if="list_hs.length==0||!list_hs" />
                <div class="MarB" v-for="(item,i) in list_hs" :key="i"  @click="goInfo(item,'会事')">
                  <el-row :gutter="20">
                    <el-col :span="8">
                      <div class="shadow-1" style="height:150px ;">
                        <imgView :src="item.thumb" />
                      </div>
                    </el-col>
                    <el-col :span="16">
                      <div class="flex-d flex-j-c" style="height: 100%;">
                        <div class="font-title omit-2 font-text-al-l">{{ item.name }}</div>
                        <div class="font-content omit-3 MarT font-text-al-l" >{{ item.blurb }}</div>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </div>

            </template>
          </Card1>
          <Card1 title="精品课程" :more="true" class="MarT" @moreClick="goList">
            <template v-slot:main1>
              <div v-if="!jpkc" style="height:504px ;">
                <myEmpty  />
              </div>
              <div class="ad-view MarB" style="height:504px ;" v-if="jpkc" @click="gojpInfo">
                <imgView :src="jpkc.icon" />
              </div>
              <div style="width: 100%;padding-bottom:20px;" class="flex flex-j-c">
                <div class="btn" @click="goList">
                  <img src="@/assets/img/icon-s1.png" alt="">
                  <span>首页</span>
                </div>
                <div class="btn" style="margin-left: 38px;">
                  <img src="@/assets/img/icon-s2.png" alt="">
                  <span>电话咨询</span>
                </div>
              </div>
            </template>
          </Card1>
        </el-col>
        <el-col :span="8" v-if="module_list[4].show">
          <Card1 title="映像" :more="true"  @moreClick="more(module_list[4].id,'映像')">
            <template v-slot:main1>
              <div style="min-height:1377px;">
                <div class="ad-view MarB shadow-1 po-re" style="height:210px ;" v-for="(item,i) in list_yx" :key="i" @click="goInfo(item,'映像')">
                  <imgView :src="item.thumb" />
                  <div class="po-ab0 xf-font-small omit" style="width: 100%;text-align: left;">
                    {{item.name }}
                  </div>
                </div>
              </div>
              
            </template>
          </Card1>
        </el-col>
      </el-row>
    </div>
    </div>
  </div>
</template>

<script setup>
import CryptoJS from 'crypto-js';
import { ref,reactive, onMounted,getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
import { useRoute, useRouter } from "vue-router";
const Router = useRouter();
import Card1 from '../components/card1.vue';

  // 原始模块
  const module_list = ref([
    {id:34,name:'焦点',show:false},
    {id:35,name:'调研',show:false},
    {id:36,name:'培训',show:false},
    {id:37,name:'会事',show:false},
    {id:38,name:'映像',show:false},
    {id:-1,name:'精彩课程',show:false},
  ])
  // 导航下对应模块
  const list_children = proxy.$comJs.extract(JSON.parse(localStorage.getItem( 'headerTabs' )),JSON.parse(CryptoJS.AES.decrypt(Router.currentRoute.value.query.ob,'name').toString(CryptoJS.enc.Utf8)),'name')[0].children
  // 面包屑
  const breadcrumb_list = list_children
  // 广告
  const ad_list1= ref([])
  const getAd=()=>{
    proxy.$comJs.getAd(proxy.$comJs.extract(JSON.parse(localStorage.getItem( 'headerTabs' )),JSON.parse(CryptoJS.AES.decrypt(Router.currentRoute.value.query.ob,'name').toString(CryptoJS.enc.Utf8)),'name')[0].id,0,function(res){
        var list1 = [],list2=[],list3=[],list4=[],list5=[]
        res.list.map((item)=>{
            if(item.nid == 34){
                list1.push(item)
            }
        })
        ad_list1.value = list1.length>0?list1:[]

    })
  }
  getAd()
  // 子栏目跳转
  const goList1=(item,i)=>{
      Router.push({
          name:'listTab',
          query:{
          ob:proxy.$comJs.encry({
              title:item.name,
              i:i,
              titleList:list_children,
              firstTitle:proxy.$comJs.extract(JSON.parse(localStorage.getItem( 'headerTabs' )),JSON.parse(CryptoJS.AES.decrypt(Router.currentRoute.value.query.ob,'name').toString(CryptoJS.enc.Utf8)),'name')[0].name
          })
          }
      });
  }
  const list_jd = ref([])
  const list_jds = ref([])
  const jd_list = ref([])
  const list_dy = ref([])
  const list_px = ref([])
  const list_yx = ref([])
  const list_hs = ref([])
  // 焦点
  const get_list1=()=>{
    const id = module_list.value[0].id
    proxy.$http.request(proxy.$api.list_news+'?nextTag=0&nid='+id+'&pageSize=7&prevTag=0','get',{},false, function (res) {
      if(res&&res.data){
        if(res.data.data.list!= undefined){
          list_jd.value = res.data.data.list
          if(res.data.data.list.length>2){
            res.data.data.list.map((item,i)=>{
              if(i>1){
                list_jds.value.push(item)
              }
            })
          }
          
        } 
      }
    })
  }
  const get_list2=()=>{
    const id = module_list.value[1].id
    proxy.$http.request(proxy.$api.list_news+'?nextTag=0&nid='+id+'&pageSize=100&prevTag=0','get',{},false, function (res) {
      if(res&&res.data){
        if(res.data.data.list!= undefined){
          list_dy.value = res.data.data.list
        } 
      }
    })
  }
  const get_list3=()=>{
    const id = module_list.value[2].id
    proxy.$http.request(proxy.$api.list_news+'?nextTag=0&nid='+id+'&pageSize=6&prevTag=0','get',{},false, function (res) {
      if(res&&res.data){
        if(res.data.data.list!= undefined){
          list_px.value = res.data.data.list
        } 
      }
    })
  }
  const get_list4=()=>{
    const id = module_list.value[3].id
    proxy.$http.request(proxy.$api.list_news+'?nextTag=0&nid='+id+'&pageSize=100&prevTag=0','get',{},false, function (res) {
      if(res&&res.data){
        if(res.data.data.list!= undefined){
          list_hs.value = res.data.data.list
        } 
      }
    })
  }
  const get_list5=()=>{
    const id = module_list.value[4].id
    proxy.$http.request(proxy.$api.list_news+'?nextTag=0&nid='+id+'&pageSize=6&prevTag=0','get',{},false, function (res) {
      if(res&&res.data){
        if(res.data.data.list!= undefined){
          list_yx.value = res.data.data.list
        } 
      }
    })
  }
  // 页面模块权限
  const seek=(id)=>{
    var flag = false
    list_children.map((item)=>{
      if(item.id == id){
        flag = true
      }
    })
    return flag
  }
  const sort_module=()=>{
    module_list.value.map((item,i)=>{
      item.show = seek(item.id)
      if(item.id == 34&&seek(item.id)){
        get_list1()
      }
      if(item.id == 35&&seek(item.id)){
        get_list2()
      }
      if(item.id == 36&&seek(item.id)){
        get_list3()
      }
      if(item.id == 37&&seek(item.id)){
        get_list4()
      }
      if(item.id == 38&&seek(item.id)){
        get_list5()
      }
    })
  }
  sort_module()
  const more =(id,title)=>{
    Router.push({
        path:'/animatedly/list',
        query:{
          ob:proxy.$comJs.encry({
            title:title,
            id:id,
            first_title:proxy.$comJs.extract(JSON.parse(localStorage.getItem( 'headerTabs' )),JSON.parse(CryptoJS.AES.decrypt(Router.currentRoute.value.query.ob,'name').toString(CryptoJS.enc.Utf8)),'name')[0].name,
          })
        }
      });
  }
  const goInfo=(item,name)=>{
    const routeUrl = Router.resolve({
        path:'/animatedly/info',
        query:{
            ob:proxy.$comJs.encry({
                title:name,
                id:item.newsId,
                path:'/animatedly/list',
                first_title:'重要活动',
                first_path:-1
            })
        }
    });
    window.open(routeUrl.href, "_blank");
  }
  // 精品课程列表
  const jpkc = ref(null)
  const get_jpkc_list=()=>{
    proxy.$http.request(proxy.$api.course+'?nextTag=0&pageSize=1&prevTag=0&sty=4','get',{},false, function (res) {
      if(res&&res.data){
        if(res.data.data.list!= undefined){
          
          jpkc.value = res.data.data.list[0]
        } 
      }
    })
  }
  get_jpkc_list()
  // 精品课程列表
  const goList=()=>{
    Router.push({
      name:'mainAc-list1',
    })
  }
  const gojpInfo=()=>{
      Router.push({
          path:'/mainAc/jpinfo',
          query:{
              ob:proxy.$comJs.encry(jpkc.value.cid)
          }
      });
  }
</script>

<style lang='less' scoped>
.pxview{
  height: 64px;
  font-size: 16px;
  line-height: 64px;
  background: #fff;
  margin-bottom: 20px;
}
.btn{
  width: 200px;
  height: 56px;
  background: linear-gradient(to bottom, #FF584F, #D10B00);
  border-radius: 28px 28px 28px 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  span{
    color: #fff;
    margin-left: 30px;
    font-size: 18px;
  }
}
.pxviewbg{
  background: url('@/assets/img/ad-bg1.png');
  background-size:100% 100% ;
}
</style>

